<template>
  <div class="righttop">
    <div id="TopTitle" style="width: 500px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; //   npm install echarts@4.9.0
export default {
  name: "TopTitle",
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
          this.mycharts();
    })
  },
  methods: {
    mycharts() {
      let myChart = echarts.init(document.getElementById("TopTitle"));
      myChart.setOption({
        graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: 'NEWS新媒体',
          fontSize: 80,
          fontWeight: 'bold',
          lineDash: [0, 200],
          lineDashOffset: 0,
          fill: 'transparent',
          stroke: '#000',
          lineWidth: 1
        },
        keyframeAnimation: {
          duration: 3000,
          loop: true,
          keyframes: [
            {
              percent: 0.7,
              style: {
                fill: 'transparent',
                lineDashOffset: 200,
                lineDash: [200, 0]
              }
            },
            {
              // Stop for a while.
              percent: 0.8,
              style: {
                fill: 'transparent'
              }
            },
            {
              percent: 1,
              style: {
                fill: 'black'
              }
            }
          ]
        }
      }
    ]
  }
      });
    },
  },
};
</script>

<style scoped>
</style>
